import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'

export default {
  install (app) {
    app.directive('imgLazy', {
      mounted (el, { value }) {
        // el: 绑定的dom  value是绑定的值
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              el.src = value

              el.onerror = () => {
                el.src = defaultImg
              }

              stop()
            }
          }
        )
      }
    })
  }
}
